import React from 'react'
// import {render} from 'react-dom'
// SSR 使用 hydrate 优化性能
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'

import App from './app'

import reducers from './reducer'
import './config'
import './index.css'

// redux dev tools
const reduxDevtools = window.devToolsExtension ? window.devToolsExtension() : f => f // function
const store = createStore(reducers, compose(applyMiddleware(thunk), reduxDevtools))

// hydrate 是 ssr 用的，在前端开发时会报一个警告，所以有了下面的做法

function doRender() {
  const main = document.getElementById('root')
  const renderOrHydrate = main.innerHTML.trim().length ? 'hydrate' : 'render'
  ReactDOM[renderOrHydrate](
    <Provider store={store} >
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>,
    main
  )
}
doRender()

// 上边代码老得版本，会有警告
// ReactDOM.hydrate(<Provider store={store} >
//   <BrowserRouter>
//     <App />
//   </BrowserRouter>
// </Provider>, document.getElementById('root'))

// 以下为测试内容
// 以下为测试内容
// 以下为测试内容

// 测试 redux
// import './test/simpleRedux'
// 测试 my-redux
// import './test/my-redux/1.use-my-redux'

// 测试 my-react-redux
// import './test/my-redux/2.use-my-react-redux'

// 测试 context
// import React from 'react'
// import ReactDOM from 'react-dom'

// import Father from './test/context/context'

// ReactDOM.render(<Father />, document.getElementById('root'))